.portfolio {
    padding-bottom: 0;
}
.filters {
    margin-top: 10px;
    margin-bottom: 36px;
    ul {
        margin: 0 -25px;
        padding: 0;
        list-style: none;
        font-size: 0;
        li {
            display: inline-block;
            a {
                position: relative;
                display: block;
                font-family: $pd;
                font-size: 11px;
                font-style: italic;
                color: #555;
                margin: 5px 25px;
                padding: 12px 0;
                &:after {
                    content: '//';
                    display: block;
                    position: absolute;
                    right: -25px; top: 50%;
                    @include translate(50%, -50%);
                    color: #555 !important;
                }
                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 5px; height: 5px;
                    @include rounded(50%);
                    background-color: $color;
                    margin: auto;
                    left: 0; right: 0; bottom: 20px;
                    opacity: 0;
                    @include transition(all .3s ease);
                }
            }
            &:last-child {
                a {
                    &:after {
                        display: none;
                    }
                }
            }
            &.select-filter {
                a {
                    color: $color;
                    &:before {
                        bottom: 0;
                        opacity: 1;
                    }
                }
            }
        }
    }
}
.portfolio-desc {
    font-family: $pd;
    font-style: italic;
    font-size: 14px;
    color: #1b1b1b;
    line-height: 1.9em;
    letter-spacing: 0.02em;
    max-width: 705px;
    margin: 38px auto 40px;
}
.portfolio-container.portfolio-color {
    .portfolio-item-inner {
        .caption {
            background-color: $color;
            .item-categories {
                a {
                    &:hover {
                        color: #fff;
                    }
                }
            }
            .item-body {
                display: none;
            }
            .item-footer {
                .on-btn {
                    &:hover {
                        color: #fff;
                        &:after {
                            background-color: #fff;
                        }
                    }
                }
            }
        }
        &.hover-style-2 {
            .caption {
                background: none;
                &:before,
                &:after,
                .tb:before,
                .tb:after {
                    background-color: $color;
                }
            }
        }
    }
}
.portfolio-1 {
    .portfolio-item {
        padding: 0;
    }
}
.portfolio-2 {
    .portfolio-item {
        margin-bottom: 30px;
        .portfolio-item-inner {
            .caption {
                .item-footer {
                    margin-top: 40px;
                }
            }
        }
    }
}
.portfolio-item {
    .portfolio-item-inner {
        position: relative;
        overflow: hidden;
        .image-wrap {
            display: block;
            @include transition(all .3s ease);
            img {
                width: 100%;
            }
        }
        .caption {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(255,255,255,.95);
            padding: 20px 15%;
            @include transition(all .3s ease);
            z-index: 9;
            .tb {
                height: 100%;
            }
            .h5 {
                position: relative;
                padding-bottom: 10px;
                margin-top: 0;
                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 30px; height: 1px;
                    background-color: #666;
                    margin: auto;
                    left: 0; right: 0;
                    bottom: 0;
                }
                a {
                    color: inherit;
                    &:hover {
                        color: $color;
                    }
                }
            }
            .item-categories {
                font-size: 0;
                a {
                    position: relative;
                    display: inline-block;
                    font-family: $pd;
                    font-size: 12px;
                    font-style: italic;
                    margin: 3px 10px;
                    color: #3e3e3e;
                    &:after {
                        content: '//';
                        display: block;
                        position: absolute;
                        right: -10px; top: 50%;
                        @include translate(50%, -50%);
                        color: #3e3e3e;
                    }
                    &:last-child {
                        &:after {
                            display: none;
                        }
                    }
                    &:hover {
                        color: $color;
                    }
                }
            }
            .item-body {
                margin-top: 10px;
                max-height: 70px;
                overflow: hidden;
            }
            .item-footer {
                margin-top: 18px;
            }
        }
        &.hover-style-1 {
            .caption {
                opacity: 0;
                visibility: hidden;
            }
        }
        &.hover-style-2 {
            .caption {
                background: none;
                visibility: hidden;
                @include transition-delay(.5s);
                &:before,
                &:after,
                .tb:before,
                .tb:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 50%; height: 50%;
                    background-color: rgba(255,255,255,.95);
                    z-index: -1;
                    opacity: 0;
                    @include scale(0.1);
                    @include transition(all .2s linear);
                }
                &:before {
                    top: 0; left: 0;
                    @include transition-delay(.3s);
                }
                &:after {
                    top: 0; right: 0;
                    @include transition-delay(.2s);
                }
                .tb:after {
                    bottom: 0; right: 0;
                    @include transition-delay(.1s);
                }
                .tb:before {
                    bottom: 0; left: 0;
                    @include transition-delay(0s);
                }
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateY(-50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &.hover-style-3 {
            .image-wrap {
                @include scale(1.1);
                @include transition(all .4s linear);
            }
            .caption {
                opacity: 0;
                visibility: hidden;
                @include translateX(-50px);
                @include transition(all .3s ease .1s);
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateX(-50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &.hover-style-4 {
            .image-wrap {
                @include translateY(0);
            }
            .caption {
                @include translateY(100%);
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateY(50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &.hover-style-5 {
            .image-wrap {
                @include transition-delay(.08s);
            }
            .caption {
                opacity: 0;
                visibility: hidden;
                @include scale(0.2);
                @include transition-delay(0s);
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateY(50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &.hover-style-6 {
            .image-wrap {
                @include transition-delay(.08s);
                @include scale(1.1);
            }
            .caption {
                opacity: 0;
                visibility: hidden;
                @include scale(1.4);
                @include transition-delay(0s);
            }
        }
        &.hover-style-7 {
            .image-wrap {
                @include scale(1.1);
                @include transition(all .4s linear);
            }
            .caption {
                opacity: 0;
                visibility: hidden;
                @include translateX(100px);
                @include transition(all .3s ease .1s);
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateX(50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &.hover-style-8 {
            .image-wrap {
                @include scale(1.1);
                @include transition(all .4s linear);
            }
            .caption {
                opacity: 0;
                visibility: hidden;
                @include translateY(-50%);
                @include transition(all .3s ease .1s);
                .tb-cell {
                    > div {
                        opacity: 0;
                        @include translateY(-50px);
                        @include transition(all .3s ease);
                    }
                }
            }
        }
        &:hover {
            &.hover-style-1 {
                .caption {
                    opacity: 1;
                    visibility: visible;
                }
            }
            &.hover-style-2 {
                .caption {
                    visibility: visible;
                    @include transition-delay(0s);
                    &:before,
                    &:after,
                    .tb:before,
                    .tb:after {
                        opacity: 1;
                        @include scale(1);
                    }
                    &:before {
                        top: 0; left: 0;
                        @include transition-delay(0s);
                    }
                    &:after {
                        top: 0; right: 0;
                        @include transition-delay(.1s);
                    }
                    .tb:after {
                        bottom: 0; right: 0;
                        @include transition-delay(.2s);
                    }
                    .tb:before {
                        bottom: 0; left: 0;
                        @include transition-delay(.3s);
                    }
                    .tb-cell {
                        > div {
                            opacity: 1;
                            @include translateY(0);
                            &:nth-child(1) {
                                @include transition-delay(.5s);
                            }
                            &:nth-child(2) {
                                @include transition-delay(.45s);
                            }
                            &:nth-child(3) {
                                @include transition-delay(.4s);
                            }
                            &:nth-child(4) {
                                @include transition-delay(.35s);
                            }
                        }
                    }
                }
            }
            &.hover-style-7,
            &.hover-style-3 {
                .image-wrap {
                    @include scale(1);
                }
                .caption {
                    opacity: 1;
                    visibility: visible;
                    @include translateX(0);
                    .tb-cell {
                        > div {
                            opacity: 1;
                            @include translateX(0);
                            &:nth-child(1) {
                                @include transition-delay(.15s);
                            }
                            &:nth-child(2) {
                                @include transition-delay(.2s);
                            }
                            &:nth-child(3) {
                                @include transition-delay(.25s);
                            }
                            &:nth-child(4) {
                                @include transition-delay(.3s);
                            }
                        }
                    }
                }
            }
            &.hover-style-4 {
                .image-wrap {
                    @include translateY(-100%);
                }
                .caption {
                    @include translateY(0);
                    .tb-cell {
                        > div {
                            opacity: 1;
                            @include translateY(0);
                            &:nth-child(1) {
                                @include transition-delay(.15s);
                            }
                            &:nth-child(2) {
                                @include transition-delay(.2s);
                            }
                            &:nth-child(3) {
                                @include transition-delay(.25s);
                            }
                            &:nth-child(4) {
                                @include transition-delay(.3s);
                            }
                        }
                    }
                }
            }
            &.hover-style-5 {
                .image-wrap {
                    @include scale(1.1);
                    @include transition-delay(0);
                }
                .caption {
                    opacity: 1;
                    visibility: visible;
                    @include scale(1);
                    @include transition-delay(.08s);
                    .tb-cell {
                        > div {
                            opacity: 1;
                            @include translateY(0);
                            &:nth-child(1) {
                                @include transition-delay(.15s);
                            }
                            &:nth-child(2) {
                                @include transition-delay(.2s);
                            }
                            &:nth-child(3) {
                                @include transition-delay(.25s);
                            }
                            &:nth-child(4) {
                                @include transition-delay(.3s);
                            }
                        }
                    }
                }
            }
            &.hover-style-6 {
                .image-wrap {
                    @include scale(1);
                    @include transition-delay(0);
                }
                .caption {
                    opacity: 1;
                    visibility: visible;
                    @include scale(1);
                    @include transition-delay(.08s);
                }
            }
            &.hover-style-8 {
                .image-wrap {
                    @include scale(1);
                }
                .caption {
                    opacity: 1;
                    visibility: visible;
                    @include translateY(0);
                    .tb-cell {
                        > div {
                            opacity: 1;
                            @include translateY(0);
                            &:nth-child(1) {
                                @include transition-delay(.3s);
                            }
                            &:nth-child(2) {
                                @include transition-delay(.25s);
                            }
                            &:nth-child(3) {
                                @include transition-delay(.2s);
                            }
                            &:nth-child(4) {
                                @include transition-delay(.15s);
                            }
                        }
                    }
                }
            }
        }
    }
}
.loading-page {
    margin-top: 55px;
    margin-bottom: 65px;
    .icon {
        font-size: 30px;
        color: #1b1b1b;
    }
}